// 引入 用来发送请求的方法
import { request } from "../../request/index"
import regeneratorRuntime from '../../lib/runtime/runtime';
/*
  点击+
    调用小程序内置的 选择图片的 api
    获取到 图片的路径 数组
    把图片路径 存到 data的变量中
    页面可以根据 图片数组 进行循环
*/
Page({
  data: {
    tabs:[
      {
        id: 0,
        value: '体验问题',
        isActive: true
      },
      {
        id: 1,
        value: '商品、商家投诉',
        isActive: false
      }
    ],
    chooseImgs: [],
    // 文本域
    textVal: ""
  },
  // 外网的图片的路径数组
  UpLoadImgs: [],

  // 标题点击事件 从子组件传递过来
  handleTabsItemChange(e) {
    // 获取被点击的标题索引
    const { index } = e.detail;
    // 修改原数组
    let {tabs} = this.data;
    tabs.forEach((v, i) => i===index?v.isActive=true:v.isActive=false);
    // 赋值到data中
    this.setData({
      tabs
    })
  },

  // 点击+选择图片
  handleChooseImg() {
    // 调用小程序内置的选择图片api
    wx.chooseImage({
      // 同时选中的图片数量
      count: 9,
      // 图片的格式 原图 压缩
      sizeType: ['original', 'compressed'],
      // 图片的来源 相册 照相机
      sourceType: ['album', 'camera'],
      success: (result) => {
        // console.log(result);
        this.setData({
          chooseImgs: [...result.tempFilePaths, ...this.data.chooseImgs]
        })
      }
    })
  },

  // 点击自定义图片组件
  handleRemoveImg(e) {
    const {index} = e.currentTarget.dataset;
    let {chooseImgs} = this.data;
    chooseImgs.splice(index, 1);
    this.setData({
      chooseImgs
    })
  },

  // 文本域的输入事件
  handleTextInput(e) {
    this.setData({
      textVal: e.detail.value
    })
  },

  // 提交按钮的点击事件
  handleFormSubmit() {
    const {textVal, chooseImgs} = this.data;
    // 合法性验证
    if(!textVal.trim()) {
      wx.showToast({
        title: '输入不合法',
        icon: 'none',
        mask: true
      });
      return;
    }
    
    wx.showLoading({
      title: '正在上传中',
      mask: true
    });
    // 判断有没有需要上传的图片数组
    if(chooseImgs.length != 0) {
        // 准备上传图片 到专门的图片服务器
        chooseImgs.forEach((v, i) => {
          wx.uploadFile({
            // 被上传的文件按路径
            filePath: v,
            // 上传的文件的名称 后台来获取文件
            name: 'file',
            // 图片要上传到哪里
            url: 'https://imgchr.com',
            // 顺带的文本
            formData: {},
            success: (result) => {
              console.log(result);
              let url = JSON.parse(result.data).url;
              this.UpLoadImgs.push(url);

              // 所有的图片都上传完毕才触发
              if(i===chooseImgs.length-1){
                wx.hideLoading();

                console.log("把文本的内容和外网的图片数组 提交到后台中");
                // 提交成功
                // 重置页面
                this.setData({
                  textVal: "",
                  chooseImgs: []
                });
                // 返回上一个页面
                wx.navigateBack({
                  delta: 1
                });
              }
            }
          });
        });
    } else {
      console.log('只是提交文字');
      wx.hideLoading();
      // 返回上一个页面
      wx.navigateBack({
        delta: 1
      });
    }

  }
})